<template>
    <breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
    <!-- wrapper -->
    <div class="module-common-wrapped">
        <div class="module-common-content">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="公告管理" name="first">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="search-wrapped">
                                    <el-select v-model="department" style="width: 200px;" placeholder="选择部门进行筛选"
                                        @change="getListByDepartment">
                                        <el-option v-for="item in departmentData" :key="item" :label="item"
                                            :value="item" />
                                    </el-select>
                                    <!-- </div>
                                <div class="select-wrapped"> -->

                                    <el-radio-group v-model="radio2" class="ml-4" @change="getMessageListBylevel">
                                        <el-radio value="一般">一般</el-radio>
                                        <el-radio value="重要">重要</el-radio>
                                        <el-radio value="必要">必要</el-radio>
                                    </el-radio-group>
                                    <!--  <el-input v-model="productId" class="w-50 m-2" size="large" placeholder="输入入库编号进行搜索"
                                        :prefix-icon="Search" @change="" clearable @clear="" /> -->
                                </div>
                                <div class="button-wrapped">
                                    <el-button type="primary" plain @click="changeTwoPageList">全部公告</el-button>
                                    <el-button type="primary" @click="createMessage(1)">发布公告</el-button>
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-talbe">
                                <el-table :data="companyTableData" border stripe height="450" style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="message_title" label="公告主题" width="220"></el-table-column>
                                    <el-table-column prop="message_category" label="类别"></el-table-column>
                                    <el-table-column prop="message_publish_department" label="发布部门"></el-table-column>
                                    <el-table-column prop="message_publish_name" label="发布人"></el-table-column>
                                    <el-table-column prop="message_receipt_object" label="接收对象"></el-table-column>
                                    <el-table-column prop="message_level" label="公告等级"></el-table-column>
                                    <el-table-column prop="message_publish_time" label="发布时间" width="120">
                                        <template #default="{ row }">
                                            <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="message_update_time" label="最新编辑时间" width="120">
                                        <template #default="{ row }">
                                            <div>{{ row.message_update_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="message_click_number" label="阅读人数"></el-table-column>
                                    <el-table-column prop="address" label="操作" width="240" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="success" @click="editMessage(row)">编辑</el-button>
                                                <el-button type="danger" @click="deleteMessage(row)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="1" :current-page="paginationData.companycurrentPage"
                                :pager-count="7" :page-count="paginationData.companypageCount"
                                :total="paginationData.companyTotal" @current-change="CompanyCurrentChange"
                                layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="系统消息" name="second">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="search-wrapped">

                                </div>
                                <div class="button-wrapped">
                                    <el-button type="primary" @click="createMessage(2)">发布系统消息</el-button>

                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-talbe">
                                <el-table :data="systemTableData" border stripe height="450" style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="message_title" label="消息主题"></el-table-column>
                                    <el-table-column prop="message_publish_name" label="发布者"></el-table-column>
                                    <el-table-column prop="message_click_number" label="阅读人数"></el-table-column>
                                    <el-table-column prop="message_publish_time" label="发布时间">
                                        <template #default="{ row }">
                                            <div>{{ row.message_publish_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="200" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="success" @click="editSystemMessage(row)">编辑</el-button>
                                                <el-button type="danger" @click="deleteMessage(row)">删除</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="1" :current-page="paginationData.systemcurrentPage"
                                :pager-count="7" :page-count="paginationData.systempageCount"
                                :total="paginationData.systemTotal" @current-change="SystemCurrentChange"
                                layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <createVue ref="cre" @success="changeTwoPageList"></createVue>
    <deleteVue ref="deletem" @success="changeTwoPageList"></deleteVue>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import breadCrumb from '@/components/bread_crumb.vue'
import createVue from '../components/create_edit.vue'
import deleteVue from '../components/delete.vue'
import { bus } from '@/utils/mitt.js'
import { searchMessageByDepartment, searchMessageByLevel, getCompanyMessageLength, getSystemMessageLength, returnCompanyListData, returnSystemListData } from '@/api/message.js'
import { getDepartment } from '@/api/setting'
import { TabsPaneContext } from 'element-plus'



//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
    first: '消息管理',
    second: '消息列表',
})
const handleClick = (tab: TabsPaneContext, event: Event) => {

}
const activeName = ref('first')

// 根据部门进行筛选
const department = ref()
// 部门数据
const departmentData = ref([])
const getdepartment = async () => {
    departmentData.value = await getDepartment()
}
getdepartment()
// 根据部门进行筛选
const companyTableData = ref([])
const systemTableData = ref([])
const getListByDepartment = async () => {
    companyTableData.value = await searchMessageByDepartment(department.value)
}
// 根据消息等级进行筛选
const radio2 = ref()
const getMessageListBylevel = async () => {
    companyTableData.value = await searchMessageByLevel(radio2.value)
}

/*
const getMessageList = async () => {
    companyTableData.value = await companyMessageList()
}
 getMessageList()
// 获取系统消息列表
const getSystemList = async () => {
    systemTableData.value = await systemMessageList()
}
getSystemList()
const getTwoList = async () => {
    getMessageList()
    getSystemList()
} */
// 发布公告/编辑公告
const cre = ref()
const createMessage = (id: number) => {
    bus.emit('createMessage', id)
    cre.value.open()
}
const editMessage = (row: any) => {
    bus.emit('editMessage', row)
    cre.value.open()
}
const editSystemMessage = (row: any) => {
    bus.emit('editSystemMessage', row)
    cre.value.open()
}
// 删除公司或者系统消息
const deletem = ref()
const deleteMessage = (row: any) => {
    bus.emit('deleteMessageId', row)
    deletem.value.open()
}

//  分页数据
const paginationData = reactive({
    // 公司公告总数
    companyTotal: 1,
    // 公司公告列表总页数
    companypageCount: 1,
    // 公司公告列表当前所处页数
    companycurrentPage: 1,
    // 系统消息总数
    systemTotal: 1,
    // 系统消息列表总页数
    systempageCount: 1,
    // 系统消息列表当前所处页数
    systemcurrentPage: 1,

})
// 获取公司公告列表的页数
const getCompanyMessageLengthFn = async () => {
    const res = await getCompanyMessageLength()
    paginationData.companyTotal = res.length
    paginationData.companypageCount = Math.ceil(res.length / 10)
}
getCompanyMessageLengthFn()
// 获取系统消息列表的页数
const getSystemMessageLengthFn = async () => {
    const res = await getSystemMessageLength()
    paginationData.systemTotal = res.length
    paginationData.systempageCount = Math.ceil(res.length / 10)
}
getSystemMessageLengthFn()
// 默认获取公司公告列表第一页的数据
const getCompanyMessageFirstPageList = async () => {
    companyTableData.value = await returnCompanyListData(1)
}
getCompanyMessageFirstPageList()
// 默认获取系统消息列表第一页的数据
const getSystemMessageFirstPageList = async () => {
    systemTableData.value = await returnSystemListData(1)
}
getSystemMessageFirstPageList()

// 更新公司公告列表及系统消息列表的第一页数据
const changeTwoPageList = () => {
    department.value = null
    radio2.value = null
    getCompanyMessageFirstPageList()
    getSystemMessageFirstPageList()

}
// 公司公告列表监听换页
const CompanyCurrentChange = async (value: number) => {
    paginationData.companycurrentPage = value
    companyTableData.value = await returnCompanyListData(paginationData.companycurrentPage)
}
// 系统消息列表监听换页
const SystemCurrentChange = async (value: number) => {
    paginationData.systemcurrentPage = value
    systemTableData.value = await returnSystemListData(paginationData.systemcurrentPage)
}

</script>

<style scoped lang="scss">
.el-radio-group {
    margin-left: 20px;
}

:deep(.el-table .cell) {
    font-weight: 400;
}
</style>